<template>
    <el-dialog @open="open" v-model="isOpen" title="完成采购需求" @close="close" style="width: 1300px;">
        <el-table ref="table" border v-loading="loading"  :data="details"
                  header-cell-class-name="headerClass">
            <el-table-column align="center" prop="skuId" label="商品id" width="80"/>
            <el-table-column align="center" prop="skuNameTemp" label="商品名" />
            <el-table-column align="center" prop="skuNum" label="采购数量" width="100"/>
            <el-table-column align="center" prop="wareId" label="仓库id" width="80"/>
            <el-table-column align="center" prop="wareNameTemp" label="仓库名" width="120"/>
            <el-table-column align="center" prop="status" label="状态" width="100">
                <template #default="scope">
                    <el-tag effect="dark" type="warning" v-if="scope.row.status===2">正在采购</el-tag>
                    <el-tag effect="dark" type="success" v-else-if="scope.row.status===3">已完成</el-tag>
                    <el-tag effect="dark" type="error" v-else-if="scope.row.status===4">采购失败</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150">
                <template #default="scope">
                    <el-select v-model="scope.row.result" placeholder="请选择" @change="changeSelect(scope.row)">
                        <el-option label="完成" :value = "3" />
                        <el-option label="异常" :value = "4" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column align="center" label="异常原因" width="300px">
                <template #default="scope">
                    <el-input v-model="scope.row.reason" :disabled="scope.row.result!==4" :placeholder="scope.row.result===4?'输入原因':''">
                    </el-input>
                </template>
            </el-table-column>
        </el-table>
        <div class="flexCenter">
        <el-button type="primary" style="margin-left: 15px" activity @click="done">确定</el-button>
        <el-button @click="close" type="success" activity >取消</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    const  emits = defineEmits(['reload'])

    let loading = ref(true)
    let props = defineProps(['id'])
    let details = ref([])
    let isOpen = ref(false)
    defineExpose({isOpen})

    function open(){
        request.get(`/api/myWmsPurchase/getPurchaseDetails/${props.id}`).then(resp => {
            details.value = resp
            loading.value = false
        })
    }

    function close(){
        isOpen.value = false
    }
    const done = () => {
        let flag = 0
        let items = details.value.map(e=>{
            if(!e.result){// 没有选择状态
                flag=1
            }
            if(e.result===4 && !e.reason){// 没有填写原因
                flag=2
            }
            return {itemId:e.id, status: e.result, reason: e.result===4?e.reason:null}
        })
        if(flag===1){
            ElMessage({message: '请选择采购需求的状态！',type: 'error'})
            return
        }else if(flag===2){
            ElMessage({message: '请填写异常原因！',type: 'error'})
            return
        }
        let param = {purchaseId: props.id,items:items}
        request.post(`/api/myWmsPurchase/done`,param).then(resp => {
            close()
            emits('reload')
        })
    }
    const changeSelect=(row)=>{
        if(row.result==3){
            row.reason = null
        }
    }
</script>

<style scoped>

</style>